import NavBar from "../components/commons/navbar/NavBar.tsx";
import SideBar from "../components/library/SideBarStore.tsx";
import LibraryContainer from "../components/library/LibraryContainer.tsx";
import '../styles/modules/library.css'
import {useEffect, useState} from "react";
import {Category} from "../model/Category.ts";
import ToastNotification from "../components/commons/ToastNotification.tsx";
import LibraryModal from "../components/library/LibraryModal.tsx";


const LibraryPage = () => {
    const baseURL = 'http://127.0.0.1:5000';
    const [categoryList, setCategoryList] = useState<Category[]>([])

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(`${baseURL}/api/library/info`, {
                    method: 'GET',
                    headers: {
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Headers': 'Content-Type, Accept, Origin, X-Requested-With',
                        'Content-Type': 'application/json'
                    }
                });
                const data = await response.json();
                console.log(data)
                setCategoryList(data.categories)
            } catch (error) {
                console.error('Error fetching data')
            }
        }

        fetchData();
    }, []);


    return (

        <>
            <NavBar/>

            <ToastNotification/>
            <main className="d-flex flex-nowrap">
                <SideBar/>
                <div data-bs-spy="scroll" className={"overflow-y-scroll"} data-target="#sidebar" id="album-categories" data-bs-smooth-scroll="true"
                >

                    {
                        categoryList.map((category) => (
                            <LibraryContainer id={`container-${category.categoryId}`} name={category.categoryId.toString()} items={category.stacks}
                                              imgUrl={"http://127.0.0.1:5000" + category.imageUrl}/>
                        ))
                    }


                </div>

                <LibraryModal/>
            </main>
        </>
    )
}

export default LibraryPage